<template>
	<div class="edit-dialog" v-show="show">
        <div class="edit-dialog-box">
            <p class="edit-dialog-title">
                <span class="title-text">{{title}}</span>
                <span class="icon-close" @click="cancelFn"></span>
            </p>
            <div class="edit-dialog-content">{{msg}}</div>
            <div class="edit-dialog-button">
                <blue-btn :clickEvent="confirm" text="确定" class="confirm-btn"></blue-btn>
                <blue-btn :clickEvent="cancelFn" text="取消"></blue-btn>
            </div>
        </div>
        
        
	</div>

</template>

<script>
import BlueButton from "../BlueButton";
export default {
  	props: {
          
	},
  	data () {
    	return {
            state: false,
            show: false,
            title: "信息",
            msg: "这是一个对话框",
            confirmFn: () => {},

		}
	},
	components: {
        "blue-btn": BlueButton,
	},
	created () {

    },
    methods: {
        setState(state) {
            this.state = state;
            this.$emit("getRectSelectedState", this.state);
        },
        dialog(options) {
            this.title = options.title || "提示";
            this.msg = options.msg || "请确认您的操作";
            this.confirmFn = options.confirmFn;
            this.show = true;
        },
        hide() {
            this.show = false;
        },
        cancelFn() {
            this.hide();
        },
        confirm() {
            this.confirmFn();
            this.hide();
        }
    },
	mounted () {

    }
}
</script>

<style scoped>
    .edit-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background:rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }
    .edit-dialog-title {
        color: #fff;
        background: #3876af;
        position: relative;
        text-align: left;
        padding: 0 20px;
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .edit-dialog-title span {
        display: block;
    }
    .edit-dialog-content {
        min-height: 66px;
        padding: 10px 20px;
        text-align: left;
        font-size: 14px;
        font-family: "微软雅黑";
    }
    .edit-dialog-title .title-text {
        display: inline;
    }
    .icon-close {
        display: block;
        /* background: url("../../../static/image/icon.png") no-repeat; */
        
        background-position: 4px -37px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }
    .icon-close:hover {
        opacity: 0.6;
    }
    .edit-dialog-box {
        background: #fff;
        width: 260px;
        
    }
    .edit-dialog-button {
        display: flex;
        border-top: 1px solid #eee;
        background: #f9f9f9;
        height: 46px;
        align-items: center;
        justify-content: center;
    }
    .confirm-btn {
        margin-right: 10px;
    }
</style>